import { Select } from 'antd';
import jsonp from 'fetch-jsonp';
import qs from 'qs';
import React, { useState } from 'react';
const { Option } = Select;
let timeout;
let currentValue;

const fetch = (value, callback) => {
    if (timeout) {
        clearTimeout(timeout);
        timeout = null;
    }

    currentValue = value;

    const fake = () => {
        const str = qs.stringify({
            code: 'utf-8',
            q: value,
        });
        jsonp(`https://suggest.taobao.com/sug?${str}`)
            .then((response) => response.json())
            .then((d) => {
                if (currentValue === value) {
                    const { result } = d;
                    const data = result.map((item) => ({
                        value: item[0],
                        text: item[0],
                    }));
                    callback(data);
                }
            });
    };

    timeout = setTimeout(fake, 300);
};

const SearchInput = (props) => {
    const [data, setData] = useState([]);
    const [value, setValue] = useState();

    const handleSearch = (newValue) => {
        if (newValue) {
            fetch(newValue, setData);
        } else {
            setData([]);
        }
    };

    const handleChange = (newValue) => {
        setValue(newValue);
    };

    const options = data.map((d) => <Option key={d.value}>{d.text}</Option>);
    return (
        <Select
            showSearch
            value={value}
            placeholder={props.placeholder}
            style={props.style}
            defaultActiveFirstOption={false}
            showArrow={false}
            filterOption={false}
            onSearch={handleSearch}
            onChange={handleChange}
            notFoundContent={null}
        >
            {options}
        </Select>
    );
};

const App = () => (
    <SearchInput
        placeholder="input search text"
        style={{
            width: 200,
        }}
    />
);

export default App;
